import React, {Component} from 'react';
import Modal from '../../components/Modal';

class ModalPage extends Component {
  state = {
    isShow: false,
    childrenType: 3,
    title: '',
    toast: false,
    username: ''
  };

  showDialogForm() {
    this.setState({
      isShow: true,
      title: '表单弹框',
      toast: false,
      childrenType: 1
    });
  };

  showDialogToast() {
    this.setState({
      isShow: true,
      toast: true,
      childrenType: 2
    })
  };

  showDialogAlert() {
    this.setState({
      isShow: true,
      title: '警告',
      toast: false,
      childrenType: 3
    })
  };

  ok() {
    this.setState({
      isShow: false
    })
  }

  cancel() {
    this.setState({
      isShow: false
    })
  }


  render() {
    let {isShow, childrenType, title, toast, username} = this.state
    return (
      <div>
        <button onClick={this.showDialogForm.bind(this)}>弹出表单组件</button>
        <button onClick={this.showDialogToast.bind(this)}>弹出toast</button>
        <button onClick={this.showDialogAlert.bind(this)}>弹出对话框</button>

        {username}
        <Modal toast={toast} title={title} show={isShow} cancel={this.cancel.bind(this)} ok={this.ok.bind(this)}>

          {childrenType === 1 && <>
            <input type="text" onChange={(e) => {
              this.setState({
                username: e.target.value
              })
            }}/>
            <input type="password"/>
          </>}
          {childrenType === 2 && <>
            <span>电量过低</span>
          </>}

          {childrenType === 3 && <h4>
            确定删除吗
          </h4>}
        </Modal>
      </div>
    );
  }
}

export default ModalPage;
